<template>
  <div class="app-container sales-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <i class="el-icon-service"></i>
          售后服务管理
        </h2>
        <p class="page-subtitle">管理订单售后服务申请，处理退款、退货等业务</p>
      </div>
      <div class="header-stats">
        <div class="stat-card">
          <div class="stat-number">{{ total }}</div>
          <div class="stat-label">总记录数</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ pendingCount }}</div>
          <div class="stat-label">待处理</div>
        </div>
        <div class="stat-card">
          <div class="stat-number">{{ completedCount }}</div>
          <div class="stat-label">已完成</div>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" class="search-form">
        <el-form-item label="关联订单" prop="orderId">
          <el-input
            v-model="queryParams.orderId"
            placeholder="请输入关联订单"
            clearable
            @keyup.enter.native="handleQuery"
            class="search-input"
          >
            <i slot="prefix" class="el-input__icon el-icon-document"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="售后类型" prop="serviceType">
          <el-select
            v-model="queryParams.serviceType"
            placeholder="请选择售后类型"
            clearable
            style="width: 150px"
            class="search-select"
          >
            <el-option label="仅退款" value="1" />
            <el-option label="退货退款" value="2" />
            <el-option label="换货" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="退货原因" prop="serviceReason">
          <el-select
            v-model="queryParams.serviceReason"
            placeholder="请选择退货原因"
            clearable
            style="width: 150px"
            class="search-select"
          >
            <el-option label="商品损坏" value="商品损坏" />
            <el-option label="不喜欢" value="不喜欢" />
            <el-option label="拍错" value="拍错" />
            <el-option label="七天无理由退货" value="七天无理由退货" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTimeRange">
          <el-date-picker clearable
            v-model="queryParams.createTimeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 240px"
            class="search-date-picker">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTimeRange">
          <el-date-picker clearable
            v-model="queryParams.updateTimeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 240px"
            class="search-date-picker">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" class="search-btn">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" class="reset-btn">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-section">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['sales:sales:edit']"
            class="action-btn modify-btn"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['sales:sales:remove']"
            class="action-btn delete-btn"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['sales:sales:export']"
            class="action-btn export-btn"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </div>

    <!-- 状态分类标签 -->
    <div class="status-filter-section">
      <el-row class="mb8">
        <el-col :span="24">
          <el-radio-group v-model="statusCategory" @change="handleStatusCategoryChange" size="medium" class="status-filter">
            <el-radio-button label="all" class="status-btn">全部</el-radio-button>
            <el-radio-button label="unfinished" class="status-btn">未完成</el-radio-button>
            <el-radio-button label="finished" class="status-btn">已完成</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>

    <!-- 数据表格 -->
    <div class="table-section">
      <el-table 
        v-loading="loading" 
        :data="salesList" 
        @selection-change="handleSelectionChange"
        class="data-table"
        :header-cell-style="{ background: '#f8f9fa', color: '#495057', fontWeight: '600' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="售后ID" align="center" prop="id" width="80" />
        <el-table-column label="关联订单" align="center" prop="orderId" width="100" />
        <el-table-column label="用户ID" align="center" prop="userId" width="100" />
        <el-table-column label="售后类型" align="center" prop="serviceType" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.serviceType === '1'" type="info" class="status-tag refund-tag">仅退款</el-tag>
            <el-tag v-else-if="scope.row.serviceType === '2'" type="warning" class="status-tag return-tag">退货退款</el-tag>
            <el-tag v-else-if="scope.row.serviceType === '3'" type="success" class="status-tag exchange-tag">换货</el-tag>
            <span v-else>{{ scope.row.serviceType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退货原因" align="center" prop="serviceReason" width="120" />
        <el-table-column label="处理状态" align="center" prop="serviceStatus" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.serviceStatus === '0'" type="info" class="status-tag pending-tag">待处理</el-tag>
            <el-tag v-else-if="scope.row.serviceStatus === '1'" type="warning" class="status-tag reviewing-tag">商家审核中</el-tag>
            <el-tag v-else-if="scope.row.serviceStatus === '2'" type="success" class="status-tag agreed-tag">商家已同意</el-tag>
            <el-tag v-else-if="scope.row.serviceStatus === '3'" type="danger" class="status-tag rejected-tag">商家已拒绝</el-tag>
            <el-tag v-else-if="scope.row.serviceStatus === '4'" type="primary" class="status-tag shipped-tag">用户已发货</el-tag>
            <el-tag v-else-if="scope.row.serviceStatus === '5'" type="success" class="status-tag completed-tag">已完成</el-tag>
            <span v-else>{{ scope.row.serviceStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="平台实际退款金额" align="center" prop="refundAmount" width="140">
          <template slot-scope="scope">
            <span class="amount-text">¥{{ scope.row.refundAmount || '0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户申请退款金额" align="center" prop="applyPrice" width="140">
          <template slot-scope="scope">
            <span class="amount-text">¥{{ scope.row.applyPrice || '0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="拒绝原因" align="center" prop="refundReason" width="150" show-overflow-tooltip />
        <el-table-column label="创建时间" align="center" prop="createTime" width="120">
          <template slot-scope="scope">
            <span class="time-text">{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="updateTime" width="120">
          <template slot-scope="scope">
            <span class="time-text">{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['sales:sales:edit']"
              class="operation-btn review-btn"
            >审核售后订单</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['sales:sales:remove']"
              class="operation-btn delete-btn"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-section">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改售后服务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body class="sales-dialog">
      <!-- 说明文字 -->
      <div class="dialog-notice">
        <i class="el-icon-info"></i>
        <span>注意：<strong>审核完成后</strong>、<strong>就不能再进行二次操作</strong>请<strong>和用户协商好后</strong>再进行判断。</span>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dialog-form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="售后ID" prop="id">
              <el-input v-model="form.id" disabled class="readonly-field" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联订单" prop="orderId">
              <el-input v-model="form.orderId" disabled class="readonly-field" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户ID" prop="userId">
              <el-input v-model="form.userId" disabled class="readonly-field" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售后类型" prop="serviceType">
              <el-input v-model="form.serviceType" disabled class="readonly-field" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="退货原因" prop="serviceReason">
              <el-input v-model="form.serviceReason" disabled class="readonly-field" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户申请退款金额" prop="applyPrice">
              <el-input v-model="form.applyPrice" disabled class="readonly-field" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理状态" prop="serviceStatus">
              <el-select v-model="form.serviceStatus" placeholder="请选择处理状态" style="width: 100%" class="editable-field">
                <el-option label="待处理" value="0" />
                <el-option label="商家审核中" value="1" />
                <el-option label="商家已同意" value="2" />
                <el-option label="商家已拒绝" value="3" />
                <el-option label="用户已发货" value="4" />
                <el-option label="已完成" value="5" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平台实际退款金额" prop="refundAmount">
              <el-input v-model="form.refundAmount" placeholder="请输入平台实际退款金额" class="editable-field" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="拒绝原因" prop="refundReason">
              <el-input
                v-model="form.refundReason"
                type="textarea"
                :rows="3"
                placeholder="请输入拒绝原因（如果拒绝的话）"
                class="editable-field"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createTime">
              <el-input v-model="form.createTime" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间" prop="updateTime">
              <el-input v-model="form.updateTime" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" class="submit-btn">确 定</el-button>
        <el-button @click="cancel" class="cancel-btn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSales, getSales, delSales, addSales, updateSales } from "@/api/sales/sales"

export default {
  name: "Sales",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 售后服务表格数据
      salesList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId: null,
        serviceType: null,
        serviceReason: null,
        serviceStatus: null,
        createTimeRange: null,
        updateTimeRange: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        serviceStatus: [
          { required: true, message: "处理状态不能为空", trigger: "change" }
        ],
        refundAmount: [
          { required: false, message: "平台实际退款金额不能为空", trigger: "blur" },
          { pattern: /^\d+(\.\d{1,2})?$/, message: "请输入正确的金额格式", trigger: "blur" }
        ],
        refundReason: [
          { required: false, max: 500, message: "拒绝原因长度不能超过500个字符", trigger: "blur" }
        ]
      },
      // 状态分类
      statusCategory: 'all'
    }
  },
  computed: {
    // 计算待处理数量
    pendingCount() {
      return this.salesList.filter(item => item.serviceStatus === '0').length;
    },
    // 计算已完成数量
    completedCount() {
      return this.salesList.filter(item => item.serviceStatus === '5').length;
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询售后服务列表 */
    getList() {
      this.loading = true
      console.log('发送查询请求，参数:', this.queryParams)
      listSales(this.queryParams).then(response => {
        console.log('查询响应:', response)
        this.salesList = response.rows
        this.total = response.total
        this.loading = false
      }).catch(error => {
        console.error('查询失败:', error)
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderId: null,
        userId: null,
        serviceType: null,
        serviceReason: null,
        serviceStatus: null,
        refundAmount: null,
        applyPrice: null,
        refundReason: null,
        createTime: null,
        updateTime: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      // 添加调试信息
      console.log('查询参数:', this.queryParams)
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加售后服务"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getSales(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "审核售后服务"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSales(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addSales(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除售后服务编号为"' + ids + '"的数据项？').then(function() {
        return delSales(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('sales/sales/export', {
        ...this.queryParams
      }, `sales_${new Date().getTime()}.xlsx`)
    },
    /** 状态分类变化 */
    handleStatusCategoryChange(value) {
      if (value === 'unfinished') {
        // 未完成：状态为0,1,2,3,4
        this.queryParams.serviceStatus = '0,1,2,3,4';
      } else if (value === 'finished') {
        // 已完成：状态为5
        this.queryParams.serviceStatus = '5';
      } else {
        // 全部：清空状态条件
        this.queryParams.serviceStatus = null;
      }
      this.queryParams.pageNum = 1; // 重置页码
      this.getList();
    },
    // 表格行样式
    tableRowClassName({row, rowIndex}) {
      if (row.serviceStatus === '5') {
        return 'completed-row';
      } else if (row.serviceStatus === '3') {
        return 'rejected-row';
      }
      return '';
    }
  }
}
</script>

<style scoped>
/* 整体容器样式 */
.sales-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 20px;
  position: relative;
  overflow-x: hidden;
}

.sales-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
  z-index: 0;
}

.sales-container > * {
  position: relative;
  z-index: 1;
}

/* 页面头部样式 */
.page-header {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  color: #2c3e50;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-title i {
  margin-right: 16px;
  color: #667eea;
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
}

.page-subtitle {
  color: #7f8c8d;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

.header-stats {
  display: flex;
  gap: 20px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  border-radius: 16px;
  text-align: center;
  min-width: 100px;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.stat-card:hover::before {
  left: 100%;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 16px 40px rgba(102, 126, 234, 0.6);
}

.stat-number {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stat-label {
  font-size: 13px;
  opacity: 0.95;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* 搜索区域样式 */
.search-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.search-input .el-input__inner {
  border-radius: 12px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 16px;
  font-size: 14px;
}

.search-input .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.search-select .el-input__inner {
  border-radius: 12px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 16px;
}

.search-select .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.search-date-picker .el-input__inner {
  border-radius: 12px;
  border: 2px solid #e1e8ed;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 16px;
}

.search-date-picker .el-input__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

.search-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.search-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
}

.reset-btn {
  background: #f8f9fa;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14px;
  color: #6c757d;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reset-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(108, 117, 125, 0.3);
}

/* 操作按钮区域样式 */
.action-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 24px 32px;
  margin-bottom: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.action-btn {
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid;
  padding: 10px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.modify-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-color: #28a745;
  color: white;
}

.modify-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(40, 167, 69, 0.5);
}

.delete-btn {
  background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
  border-color: #dc3545;
  color: white;
}

.delete-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(220, 53, 69, 0.5);
}

.export-btn {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  border-color: #ffc107;
  color: white;
}

.export-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.5);
}

/* 状态筛选区域样式 */
.status-filter-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 24px 32px;
  margin-bottom: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.status-filter {
  display: flex;
  gap: 12px;
}

.status-btn {
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 10px 20px;
}

.status-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 表格区域样式 */
.table-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.data-table {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.data-table .el-table__header-wrapper {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.data-table .el-table__body tr {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.data-table .el-table__body tr:hover {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  transform: scale(1.01);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
}

.completed-row {
  background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}

.rejected-row {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}

/* 状态标签样式 */
.status-tag {
  border-radius: 8px;
  font-weight: 700;
  padding: 6px 12px;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 12px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-tag:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.pending-tag {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
}

.reviewing-tag {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  color: white;
}

.agreed-tag {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.rejected-tag {
  background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
  color: white;
}

.shipped-tag {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
}

.completed-tag {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

.refund-tag {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: white;
}

.return-tag {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  color: white;
}

.exchange-tag {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
}

/* 金额文本样式 */
.amount-text {
  font-weight: 700;
  color: #e74c3c;
  font-size: 14px;
  text-shadow: 0 1px 2px rgba(231, 76, 60, 0.1);
}

/* 时间文本样式 */
.time-text {
  color: #6c757d;
  font-size: 12px;
  font-weight: 500;
}

/* 操作按钮样式 */
.operation-btn {
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 6px;
  padding: 6px 12px;
}

.review-btn {
  color: #007bff;
}

.review-btn:hover {
  background: #007bff;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.operation-btn.delete-btn {
  color: #dc3545;
}

.operation-btn.delete-btn:hover {
  background: #dc3545;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* 分页区域样式 */
.pagination-section {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 24px 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

/* 弹窗样式 */
.sales-dialog .el-dialog {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sales-dialog .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 24px 32px;
  position: relative;
}

.sales-dialog .el-dialog__header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.sales-dialog .el-dialog__title {
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.sales-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.sales-dialog .el-dialog__headerbtn .el-dialog__close:hover {
  transform: scale(1.2);
}

.sales-dialog .el-dialog__body {
  padding: 32px;
  background: #f8f9fa;
}

/* 说明文字样式 */
.dialog-notice {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 2px solid #2196f3;
  border-radius: 16px;
  color: #1565c0;
  font-size: 15px;
  line-height: 1.6;
  padding: 20px 24px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2);
}

.dialog-notice i {
  margin-right: 16px;
  font-size: 20px;
  color: #2196f3;
}

.dialog-notice strong {
  color: #0d47a1;
  font-weight: 700;
}

/* 表单样式 */
.dialog-form {
  background: white;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.readonly-field .el-input__inner {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #6c757d;
  cursor: not-allowed;
  border: 2px solid #dee2e6;
  border-radius: 12px;
  padding: 12px 16px;
}

.editable-field .el-input__inner,
.editable-field .el-textarea__inner {
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 16px;
}

.editable-field .el-input__inner:focus,
.editable-field .el-textarea__inner:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
  transform: translateY(-2px);
}

/* 弹窗底部按钮样式 */
.dialog-footer {
  padding: 24px 32px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.submit-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
}

.cancel-btn {
  background: #f8f9fa;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  padding: 12px 32px;
  font-weight: 700;
  font-size: 14px;
  color: #6c757d;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cancel-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(108, 117, 125, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sales-container {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 20px;
    padding: 24px;
  }
  
  .header-stats {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .search-form {
    flex-direction: column;
  }
  
  .search-form .el-form-item {
    width: 100%;
  }
  
  .status-filter {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .table-section {
    padding: 20px;
  }
  
  .data-table {
    font-size: 12px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.page-header {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-section {
  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

.action-section {
  animation: slideInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

.status-filter-section {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

.table-section {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.pagination-section {
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* 加载动画 */
.el-loading-mask {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.el-loading-spinner {
  color: #667eea;
}

/* 表格行悬停效果增强 */
.data-table .el-table__body tr {
  position: relative;
}

.data-table .el-table__body tr::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.data-table .el-table__body tr:hover::after {
  opacity: 1;
}

/* 按钮点击效果 */
.action-btn:active,
.search-btn:active,
.reset-btn:active,
.submit-btn:active,
.cancel-btn:active {
  transform: translateY(0) scale(0.98);
}

/* 输入框聚焦动画 */
.search-input .el-input__inner:focus,
.search-select .el-input__inner:focus,
.search-date-picker .el-input__inner:focus,
.editable-field .el-input__inner:focus,
.editable-field .el-textarea__inner:focus {
  animation: pulse 0.3s ease;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); }
  100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}
</style>
